{extend name="common/base" /}

{block name="main"}
<div class="body-content">
	<form class="layui-form">
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="keywords" placeholder="昵称/真实姓名/手机号" class="layui-input" autocomplete="off"/>
		</div>
		<div class="layui-input-inline" style="width:120px;">
			<input type="text" class="layui-input" id="start_time" readonly placeholder="注册开始时间" name="start_time">
		</div>
		~
		<div class="layui-input-inline" style="width:120px;">
			<input type="text" class="layui-input" id="end_time" readonly placeholder="注册结束时间" name="end_time">
		</div>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchUser">提交搜索</button>
	</form>
	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
</div>

<script type="text/html" id="userTool">
	<div class="layui-btn-group">
		<span class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view">详情</span>
		<span class="layui-btn layui-btn-xs" lay-event="edit">编辑</span>
		<span class="layui-btn layui-btn-xs layui-btn-danger" lay-event="jin">禁用</span>
		<span class="layui-btn layui-btn-xs layui-btn-normal" lay-event="qi">启用</span>
		<!-- <a class="layui-btn layui-btn-xs" href="/admin/user/edit?id={{d.id}}">编辑</a> -->
	</div>
</script>
{/block}



{block name="script"}
<script type="text/javascript">
	layui.use(['table', 'form', 'laydate', 'layer'], function () {
		var table = layui.table, form = layui.form, laydate = layui.laydate, layer = layui.layer;

		// 实例化表格
		var tableIns = table.render({
			elem: "#userTable",
			title: "用户列表",
			toolbar: "",
			url: '/admin/user/list', // 数据接口
			page: true, // 开启分页
			limit: 10,
			cols: [
				[
					{ field: 'id', title: 'ID', align: 'center', width: 90 },
					{ field: 'avatar1', title: '头像', align: 'center', width: 60, templet: function (d) {
						var avatar = '<img src="' + d.avatar + '" width="30" height="30"/>';
						return avatar;
					}},
					{ field: 'realname', title: '用户名', align: 'center', width: 100 },
					{ field: 'mobile', title: '手机号', aligin: 'center', width: 120 },
					{ field: 'group_name', title: '所属组织', aligin: 'center', width: 120 },
					{ field: 'score_total', title: '积分', aligin: 'center', width: 120 },
					{ field: 'create_time', title: '注册时间', aligin: 'center', width: 160 },
					{ field: 'right', title: '操作', aligin: 'left', toolbar: '#userTool' }
				]
			]
		});

		// 监听表格工具行
		table.on('tool(userTable)', function (obj) {
			var data = obj.data;
			if (obj.event === 'view') {
				layer.alert("view");
			} else if (obj.event === 'edit') {
				layer.alert("del");
			}
		});

		// 监听搜索
		form.on('submit(searchUser)', function (data) {
			tableIns.reload({
				where: {
					keywords: data.field.keywords,
					start_time: data.field.start_time,
					end_time: data.field.end_time
				},
				page: {
					curr: 1
				}
			});
			return false;
		});

		/* 渲染日期时间组件 */
		laydate.render({
			elem: '#start_time',
			type: 'date',
		});
		laydate.render({
			elem: '#end_time',
			type: 'date',
		});


	});
</script>
{/block}